<!--统计数据总览页面-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="fragment/header::head"></div>
<body>
<div th:replace="fragment/sidebar::side"></div>


<div class="main-panel">
    <div class="content-wrapper">
<div class="row">
    <div class="col-md-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-4 col-md-6 mt-md-0 mt-4">
                        <div class="d-flex">
                            <div class="wrapper">
                                <h3 class="mb-0 font-weight-semibold"><span th:text="${session.Count}"></span></h3>
                                <h3 class="mb-0 font-weight-medium text-primary" style="line-height:90px">会话量</h3>
<!--                                <p class="mb-0 text-muted">总会话量</p>-->
                            </div>
                            <div class="wrapper my-auto ml-auto ml-lg-4"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
<!--                                <canvas height="50" width="100" id="stats-line-graph-1" class="chartjs-legend" style="display: block;"></canvas>-->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-md-0 mt-4">
                        <div class="d-flex">
                            <div class="wrapper">
                                <h3 class="mb-0 font-weight-semibold"><span th:text="${session.messageCount}"></span></h3>
                                <h3 class="mb-0 font-weight-medium text-primary " style="line-height:90px">总会话消息数</h3>
<!--                                <p class="mb-0 text-muted">+138.97(+0.54%)</p>-->
                            </div>
                            <div class="wrapper my-auto ml-auto ml-lg-4"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
<!--                                <canvas height="50" width="100" id="stats-line-graph-2" class="chartjs-render-monitor" style="display: block;"></canvas>-->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-md-0 mt-4">
                        <div class="d-flex">
                            <div class="wrapper">
                                <h3 class="mb-0 font-weight-semibold"><span th:text="${session.reViewRate}"></span></h3>
                                <h3 class="mb-0 font-weight-medium text-primary" style="line-height:90px">评价率</h3>
<!--                                <p class="mb-0 text-muted">+57.62(+0.76%)</p>-->
                            </div>
                            <div class="wrapper my-auto ml-auto ml-lg-4"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
<!--                                <canvas height="50" width="100" id="stats-line-graph-3" class="chartjs-render-monitor" style="display: block;"></canvas>-->
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 mt-md-0 mt-4">
                    <div class="d-flex">
                        <div class="wrapper">
                            <h3 class="mb-0 font-weight-semibold"><span th:text="${session.customerCount}"></span></h3>
                            <h3 class="mb-0 font-weight-medium text-primary" style="line-height:90px">客户数</h3>
                            <!--                                <p class="mb-0 text-muted">+138.97(+0.54%)</p>-->
                        </div>
                        <div class="wrapper my-auto ml-auto ml-lg-4"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
<!--                            <canvas height="50" width="100" id="stats-line-graph-4" class="chartjs-render-monitor" style="display: block;"></canvas>-->
                        </div>
                    </div>
                </div>
                    <div class="col-lg-4 col-md-6 mt-md-0 mt-4">
                        <div class="d-flex">
                            <div class="wrapper">
                                <h3 class="mb-0 font-weight-semibold"><span th:text="${session.solveRate}"></span></h3>
                                <h3 class="mb-0 font-weight-medium text-primary" style="line-height:90px">问题解决率</h3>
                                <!--                                <p class="mb-0 text-muted">+138.97(+0.54%)</p>-->
                            </div>
                            <div class="wrapper my-auto ml-auto ml-lg-4"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
<!--                                <canvas height="50" width="100" id="stats-line-graph-5" class="chartjs-render-monitor" style="display: block;"></canvas>-->
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 mt-md-0 mt-4">
                        <div class="d-flex">
                            <div class="wrapper">
                                <h3 class="mb-0 font-weight-semibold"><span th:text="${session.goodRate}"></span></h3>
                                <h3 class="mb-0 font-weight-medium text-primary" style="line-height:90px">好评率</h3>
                                <!--                                <p class="mb-0 text-muted">+138.97(+0.54%)</p>-->
                            </div>
                            <div class="wrapper my-auto ml-auto ml-lg-4"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
<!--                                <canvas height="50" width="100" id="stats-line-graph-6" class="chartjs-render-monitor" style="display: block;"></canvas>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

        <div id="main" style="width: 1600px;height:600px;" class="col-lg-12"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '会话数总览'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data: ['有效会话', '好评数']
                },
                xAxis: [
                    {
                        type: 'category',
                        data:["小明","小红","小强","小白","小丽","小黑","小灰","小德","小月","小华","小火","小键","小刚","小美","小涛","小胖","小鹏","小龙","小磊","小雷","小军","小佳","小可","小娟","小米","小金","小马"],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '会话数',
                        min: 0,
                        max: 300,
                        interval: 50,

                    },
                    {
                        type: 'value',
                        name: '好评数',
                        min: 0,
                        max: 300,
                        interval: 30,

                    }
                ],
                series: [
                    {
                        name: '有效会话',
                        type: 'bar',
                        data: [12,100,24,12,22,34,14,52,14,35,252,22,79,25,54,100,76,85,74,92,73,63,52,41,54,31,45]},

                    {
                        name: '好评数',
                        type: 'line',

                        data: [4,56,8,8,4,14,2,32,4,15,100,8,50,15,50,60,24,55,42,32,53,42,32,31,21,14,21]}
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>

        <div id="main0" style="width: 1600px;height:800px;" class="col-lg-12"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main0'));

            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '客户评价总览'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data: ['好评数', '中评数', '差评数', '未评价数','问题解决率']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                yAxis: [
                {
                    name: '评价数',
                    type: 'value'
                },
                {
                    type: 'value',
                    name: '问题解决率',
                    min: 0,
                    max: 1,
                }
                ],
                xAxis: {
                    type: 'category',
                    data: ["小明","小红","小强","小白","小丽","小黑","小灰","小德","小月","小华","小火","小键","小刚","小美","小涛","小胖","小鹏","小龙","小磊","小雷","小军","小佳","小可","小娟","小米","小金","小马"]
                },
                series: [
                    {
                        name: '好评数',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [4,56,8,8,4,14,2,32,4,15,100,8,50,15,50,60,24,55,42,32,53,42,32,31,21,14,21]
                    },
                    {
                        name: '中评数',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [4,23,1,0,4,4,2,2,1,8,20,4,10,0,1,10,15,15,6,10,10,0,0,4,2,2,1]
                    },
                    {
                        name: '差评数',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [3,3,1,0,2,2,1,1,2,2,30,0,9,0,0,10,15,5,6,10,0,0,0,1,1,2,3]
                    },
                    {
                        name: '未评价数',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [1,18,14,4,12,14,9,17,7,10,102,10,10,10,3,20,21,10,20,40,10,21,20,5,30,13,20]
                    },
                    {
                        name: '问题解决率',
                        type: 'line',
                        // stack: 'total',
                        yAxisIndex : 1,
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },

                        data: [0.7500,0.8700,0.4167,0.6667,0.4545,0.5882,0.3571,0.6731,0.5000,0.7143,0.5952,0.5455,0.8734,0.6000,0.8462,0.9444,0.8000,0.7105,0.8824,0.7297,0.5652,0.8630,0.6667,0.6154,0.8780,0.4444,0.5806,0.5556]
                    }

                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>

        <div id="main02" style="width: 1600px;height:800px;" class="col-lg-12"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main02'));

            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '工作量总览'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },

                legend: {
                    data: ['总消息数','总会话数', '一次性解决', '最终解决', '未解决','总会话时长']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['小明','小红','小白','小黑','小强','小刚','小丽','小华','小月','小灰','小德','小美','小健','小火','小亮','小马','小雷','小磊','小龙','小可','小娟','小军','小佳','小金']
                    }
                ],
                yAxis: [
                    {

                        name: '消息数',
                        min: 0,
                        max: 350,
                    },
                    {
                        type: 'value',
                        name: '总会话时长',
                        min: 0,
                        max: 8000,
                        position: 'right',
                        axisLine: {
                            show: true,
                            // lineStyle: {
                            //     color: colors[0]
                            // }
                        }
                    }
                ],
                series: [
                    {
                        name: '总消息数',
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [123,25,100,30,40,50,60,70,80,90,100,110,120,130,140,321,160,75,90,214,241,251,222,222]
                    },

                    {
                        name: '总会话数',
                        type: 'bar',
                        data: [45,12,80,20,24,30,30,50,30,70,60,50,60,100,80,151,321,122,122,241,251,265,243,244],
                        emphasis: {
                            focus: 'series'
                        },
                        // markLine: {
                        //     lineStyle: {
                        //         type: 'dashed'
                        //     },
                        //     data: [
                        //         [{type: 'min'}, {type: 'max'}]
                        //     ]
                        // }
                    },
                    {
                        name: '一次性解决',
                        type: 'bar',
                        barWidth: 5,
                        stack: '总会话数',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [11,8,40,10,10,10,20,40,20,50,50,30,40,40,30,100,221,100,121,221,241,245,213,214]
                    },
                    {
                        name: '最终解决',
                        type: 'bar',
                        stack: '总会话数',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [24,2,30,10,6,20,8,3,4,10,5,16,20,20,10,32,100,20,0,12,4,15,15,25]
                    },
                    {
                        name: '未解决',
                        type: 'bar',
                        stack: '总会话数',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [10,2,10,0,8,0,2,7,6,10,5,4,0,40,40,19,0,2,1,8,6,5,15,5]
                    },
                    {
                        name: '总会话时长',
                        type: 'line',
                        yAxisIndex: 1,
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },

                        data: [3530,500,2809,3422,4477,3637,4757,7654,3466,4574,2373,7432,3535,4646,5775,7543,3524,3462,5453,2243,3242,2121,2354,2244]
                    }

                ]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>


<div th:replace="fragment/footer::foot"></div>



</div>
</div>